<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="Content-type" name="viewport"  
          content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">  
    <meta http-equiv="Expires" content="0">  
    <meta http-equiv="Pragma" content="no-cache">  
    <meta http-equiv="Cache-control" content="no-cache">  
    <meta http-equiv="Cache" content="no-cache">  
    <title>Title</title>  
    <style>  
        .box {  
            width: 400px; padding: 15px;  background-color: #f0f3f9;  
        }  
        .container {  
            height: 0; position: relative;  overflow: hidden;  
            -webkit-transition: height 0.6s;  
            -moz-transition: height 0.6s;  
            -o-transition: height 0.6s;  
            transition: height 0.6s;  
        }  
        .container .wrap {  
            border: 20px solid #333;  
        }  
        :root .container .wrap {  
            /* 正统slide效果 */  
            position: absolute;  
            bottom: 0;  
        }  
    </style>  
</head>  
<body>  
  
  
HTML代码：  
<p>想看美女图片？<a href="javascript:" id="button" data-rel="more">点击我</a></p>  
<div id="more" class="container">  
    <div class="wrap">  
        <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />  
        <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />  
        <p>我就是张含韵！</p>  
        <p>我就是张含韵！</p>  
    </div>  
</div>  
<script>  
    setTimeout(() => {
        
    }, timeout);
    var slideToggleTrans = function(element, display) { //  display表示默认更多展开元素是显示状态还是隐藏  
        element.addEventListener("click", function() {  
  
            display = !display;  
  
            var  eleMore = document.querySelector("#more" );  
  
            eleMore && (eleMore.style.height = display? (function() {  
                var height = 0;  
                Array.prototype.slice.call(eleMore.childNodes).forEach(function(child) {  
                    if (child.nodeType === 1) {  
                        var oStyle = window.getComputedStyle(child);  
                        height = child.clientHeight + (parseInt(oStyle.borderTopWidth) || 0) + (parseInt(oStyle.borderBottomWidth) || 0);  
                    }  
                });  
                return height;  
            })() + "px": "0px");  
  
        });  
  
    };  
  
    // 应用渐进使用transition交互的slideToggle效果  
    slideToggleTrans(document.getElementById("button"));  
  
</script>  
  
  
</body>  
</html> 